<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>index</title>
    <style>
        canvas {
            border: 1px solid;
            margin: 30px;
            width: 800px;
        }
    </style>
</head>

<body>
    <canvas id="canvas">
        <img id="mood" style="width: 100px;" src="./mood.jpg" />
        <!-- 音频、音效 -->
        <audio id="hit-sound">
            <!-- <source src="" type="audio/mp3"> -->
            <source src="./click5.ogg" type="audio/ogg">
        </audio>
        <!-- 背景音乐 -->
        <audio id="bg-sound">
            <source src="./bg.ogg" type="audio/ogg">
        </audio>
    </canvas>
    
    <script src="./index.js"></script>
    <!-- <script>
        // 获取画布对象
        const canvas = document.getElementById("canvas");
        const content = canvas.getContext("2d");

        // 小球半径
        const radius = 10;

        // 加载材质对象
        let panelPattern = "white"; // 挡板材质填充对象 默认白色
        const img = document.getElementById("mood");
        img.onload = function () {
            panelPattern = content.createPattern(img, "no-repeat");
        }


        // // 绘制背景
        // content.fillStyle = "whitesmoke";
        // content.beginPath();
        // content.moveTo(0,0);
        // content.lineTo(canvas.width,0);
        // content.lineTo(canvas.width,canvas.height);
        // content.lineTo(0,canvas.height);
        // content.lineTo(0,0);
        // content.stroke();
        // content.fill();
        // content.fillRect(0, 0, canvas.width, canvas.height);

        // 绘制分隔线
        // content.strokeStyle = "white";
        // content.lineWidth = 1;
        // content.beginPath();
        // content.moveTo(canvas.width / 2, 0);
        // content.lineTo(canvas.width / 2, canvas.height);
        // content.stroke();

        // 使用渐变色绘制分隔线
        // {
        //     const grd = content.createLinearGradient(canvas.width / 2, 0, canvas.width / 2, canvas.height);
        //     grd.addColorStop(0,"whitesmoke");
        //     grd.addColorStop(0.25,"blue");
        //     grd.addColorStop(0.5,"whitesmoke");
        //     grd.addColorStop(0.75,"blue");
        //     grd.addColorStop(1,"whitesmoke");
        //     content.strokeStyle = grd;
        //     content.lineWidth = 2;
        //     content.beginPath();
        //     content.moveTo(canvas.width / 2, 0);
        //     content.lineTo(canvas.width / 2,canvas.height);
        //     content.stroke();
        // }

        // 使用间隔法绘制分隔线
        // {
        //     content.strokeStyle = "whitesomke";
        //     content.lineWidth = 1;
        //     content.beginPath();
        //     content.moveTo(canvas.width / 2, 0);
        //     content.lineTo(canvas.width / 2, 10);
        //     content.moveTo(canvas.width / 2, 20);
        //     content.lineTo(canvas.width / 2, 30);
        //     content.moveTo(canvas.width / 2, 40);
        //     content.lineTo(canvas.width / 2, 50);
        //     content.moveTo(canvas.width / 2, 60);
        //     content.lineTo(canvas.width / 2, 70);
        //     content.moveTo(canvas.width / 2, 80);
        //     content.lineTo(canvas.width / 2, 90);
        //     content.moveTo(canvas.width / 2, 100);
        //     content.lineTo(canvas.width / 2, 110);
        //     content.moveTo(canvas.width / 2, 120);
        //     content.lineTo(canvas.width / 2, 130);
        //     content.moveTo(canvas.width / 2, 140);
        //     content.lineTo(canvas.width / 2, 150);
        //     content.stroke();
        // }

        // {
        //     content.strokeStyle = "blue";
        //     content.lineWidth = 1;
        //     const xpos = canvas.width / 2;
        //     let ypos = 0;
        //     content.beginPath();
        //     while(ypos < canvas.height) {
        //         content.moveTo(xpos,ypos);
        //         content.lineTo(xpos,ypos + 10);
        //         ypos += 20;
        //     }
        //     content.stroke();
        // }

        // 将函数当作变量使用
        // {
        //     content.strokeStyle = "black";
        //     content.lineWidth = 1;
        //     const posX = canvas.width / 2;
        //     let posY = 0, 
        //     set = new Set();
        //     for(let i = 0; ; i++) {
        //         if (i % 2) continue;
        //         posY = i * 10;
        //         const y = posY;
        //         set.add(() => {
        //             console.log(`posY=${y}`);
        //             drawLine(content,posX,y);
        //         });
        //         if (posY > canvas.height) break;
        //     }
        //     content.beginPath();
        //     for (let f of set) f();
        //     content.stroke();

        //     function drawLine(content,posX,y){
        //         content.moveTo(posX,y)
        //         content.lineTo(posX,y + 10)
        //     }
        // }
        //content.fillText("挡板小游戏", 10, 30); 

        //content.font = "STHeiti 20px";
        //content.font = "italic 900 20px KaiTi"
        // 游戏名称 渲染
        function randerGameName() {
            content.font = "oblique 600 20px STHeiti"; // 设置字体样式
            // 文本居中
            const txtWidth = content.measureText("挡板小游戏").width;
            const txtHeight = content.measureText("M").width;
            const xpos = (canvas.width - txtWidth) / 2;
            const ypos = (canvas.height - txtHeight) / 2;
            const grd = content.createLinearGradient(0, ypos, 0, ypos + txtHeight); // 从上至下渐变
            grd.addColorStop(0, "red"); // 添加渐变颜色点
            grd.addColorStop(0.5, "white");
            grd.addColorStop(1, "yellow");
            content.fillStyle = grd;
            content.textBaseline = "top"; // 设置文本绘制基线，让文本上下居中
            content.fillText("挡板小游戏", xpos, (canvas.height - txtHeight) / 2);
        }
        // content.font = "oblique 600 20px STHeiti"; // 设置字体样式
        // // 文本居中
        // const txtWidth = content.measureText("挡板小游戏").width;
        // const txtHeight = content.measureText("M").width;
        // const xpos = (canvas.width - txtWidth) / 2;
        // const ypos = (canvas.height - txtHeight) / 2;
        // 设置渐变填充对象
        //const grd = content.createLinearGradient(0,0,content.measureText("挡板小游戏").width,0);
        //const grd = content.createLinearGradient(xpos, 0, xpos + txtWidth, 0); // 从左至右渐变
        // const grd = content.createLinearGradient(0, ypos, 0, ypos + txtHeight); // 从上至下渐变
        // grd.addColorStop(0, "red"); // 添加渐变颜色点
        // grd.addColorStop(0.5, "white");
        // grd.addColorStop(1, "yellow");
        //content.fillStyle = "#ff0000";
        // content.fillStyle = grd;
        // content.textBaseline = "top"; // 设置文本绘制基线，让文本上下居中
        // content.fillText("挡板小游戏", xpos, (canvas.height - txtHeight) / 2);

        // const panelHeight = 50; // 挡板高度为 100 px
        // content.lineWidth = 10; // 挡板宽度为 10 px
        // content.lineCap = "round"; // 给挡板添加圆角

        // 渲染 挡板
        function randerRightPanel() {
            // 挡板添加阴影效果
            content.shadowBlur = 1;
            content.shadowOffsetY = 2;
            content.shadowOffsetX = 2;
            content.shadowColor = "grey";
            
            const panelHeight = 50;

            //const img = document.getElementById("mood"); // 获取材质
            //const pat = content.createPattern(img, "no-repeat");
            content.fillStyle = panelPattern;
            content.fillRect(canvas.width - 5, (canvas.height - panelHeight) / 2, 5, panelHeight);
        }

        // 绘制左挡板
        function randerLeftPanel() {
            let panelHeight = 50;
            content.fillStyle = panelPattern;
            content.fillRect(0,(canvas.height - panelHeight)/2,5,panelHeight);
        }

        
        // 设置右挡板
        // content.strokeStyle = "red";
        // content.beginPath();
        // content.moveTo(canvas.width - 5, (canvas.height - panelHeight) / 2);
        // content.lineTo(canvas.width - 5, (canvas.height + panelHeight) / 2);
        // content.stroke();

        // 设置左挡板
        // content.strokeStyle = "blue";
        // content.beginPath();
        // content.moveTo(5, (canvas.height - panelHeight) / 2);
        // content.lineTo(5, (canvas.height + panelHeight) / 2);
        // content.stroke();

        // 绘制右挡板
        // const panelHeight = 50;
        // content.lineCap = "round";
        // content.lineWidth = 1;
        // content.strokeStyle = "brown";
        // content.fillStyle = "brown";
        // content.beginPath();
        // content.moveTo(canvas.width, (canvas.height - panelHeight) / 2);
        // content.lineTo(canvas.width, (canvas.height + panelHeight) / 2);
        // content.lineTo(canvas.width - 5, (canvas.height + panelHeight) / 2);
        // content.lineTo(canvas.width - 5, (canvas.height - panelHeight) / 2);
        // content.closePath();
        // content.stroke();
        // content.fill();

        // 使用fill绘制右挡板
        // content.fillStyle = "brown";
        // content.beginPath();
        // content.rect(canvas.width - 5,(canvas.height - panelHeight) / 2, 5, panelHeight); // 绘制挡板
        // content.fill();

        // 使用线性渐变对象绘制
        // const grdp = content.createLinearGradient(canvas.width - 10, (canvas.height - panelHeight) / 2, canvas.width - 10, (canvas.height + panelHeight) / 2);
        // grdp.addColorStop(0,"red");
        // grdp.addColorStop(0.5,"white");
        // grdp.addColorStop(1,"yellow");
        // content.fillStyle = grdp;

        // 使用放射渐变对象绘制
        // {
        //     const grd = content.createRadialGradient(canvas.width - 5, canvas.height / 2, 0, canvas.width - 5, canvas.height / 2, panelHeight / 2);
        //     grd.addColorStop(0, "red");
        //     grd.addColorStop(0.5, "yellow");
        //     grd.addColorStop(1, "blue");
        //     content.fillStyle = grd;
        // }

        // 使用材质对象绘制
        // {
        //     const img = document.getElementById("mood"); // 获取材质
        //     const pat = content.createPattern(img, "no-repeat");
        //     content.fillStyle = pat
        // }
        // 使用fillRect绘制右挡板
        // content.fillRect(canvas.width - 5, (canvas.height - panelHeight) / 2, 5, panelHeight);

        // 使用弧线绘制圆球
        // {
        //     const radius = 10;
        //     const pos1 = { x: canvas.width / 2 + radius, y: canvas.height / 2 },
        //         pos2 = { x: canvas.width / 2, y: canvas.height / 2 + radius },
        //         pos3 = { x: canvas.width / 2 - radius, y: canvas.height / 2 },
        //         pos4 = { x: canvas.width / 2, y: canvas.height / 2 - radius };
        //     content.fillStyle = "white";
        //     content.beginPath();
        //     content.moveTo(pos1.x, pos1.y);
        //     // content.arcTo(pos1.x, pos1.y, pos2.x, pos2.y, radius);
        //     // content.arcTo(pos2.x, pos2.y, pos3.x, pos3.y, radius);
        //     // content.arcTo(pos3.x, pos3.y, pos4.x, pos4.y, radius);
        //     // content.arcTo(pos4.x, pos4.y, pos1.x, pos1.y, radius);
        //     content.arcTo(pos1.x, pos1.y + radius, pos2.x, pos2.y, radius);
        //     content.arcTo(pos2.x - radius, pos2.y, pos3.x, pos3.y, radius);
        //     content.arcTo(pos3.x, pos3.y - radius, pos4.x, pos4.y, radius);
        //     content.arcTo(pos4.x + radius, pos4.y, pos1.x, pos1.y, radius);
        //     content.fill();
        // }

        // 使用 arc 绘制圆形
        // {
        //     const radius = 10;
        //     content.fillStyle = "white";
        //     content.beginPath();
        //     content.arc(canvas.width / 2, canvas.height / 2, radius, 0, 2 * Math.PI);
        //     content.fill();
        // }

        // 分隔线
            // {
            //     content.strokeStyle = "black";
            //     content.lineWidth = 1;
            //     const posX = canvas.width / 2;
            //     let posY = 0,
            //         set = new Set();
            //     for (let i = 0; ; i++) {
            //         if (i % 2) continue;
            //         posY = i * 10;
            //         const y = posY;
            //         set.add(() => {
            //             console.log(`posY=${y}`);
            //             drawLine(content, posX, y);
            //         });
            //         if (posY > canvas.height) break;
            //     }
            //     content.beginPath();
            //     for (let f of set) f();
            //     content.stroke();
            // }

        // 渲染 分隔线
        function renderLine(){
            content.strokeStyle = "black";
            content.lineWidth = 1;
            const posX = canvas.width / 2;
            let posY = 0,
                set = new Set();
            for (let i = 0; ; i++) {
                if (i % 2) continue;
                posY = i * 10;
                const y = posY;
                set.add(() => {
                    console.log(`posY=${y}`);
                    content.moveTo(posX, y);
                    content.lineTo(posX, y + 10);
                    //drawLine(content, posX, y);
                });
                if (posY > canvas.height) break;
            }
            content.beginPath();
            for (let f of set) f();
            content.stroke();
        }

        // 渲染
        // 小球渲染方法
        function render() {
            // 绘制背景
            content.fillStyle = "whitesmoke";
            content.fillRect(0, 0, canvas.width, canvas.height);
            randerGameName();
            randerRightPanel();
            randerLeftPanel();
            renderLine();
            // 根据小球位置绘制
            content.fillStyle = "white";
            content.beginPath();
            content.arc(ballPos.x, ballPos.y, radius, 0, 2 * Math.PI);
            content.fill();
        }

        // // 绘制分隔线
        // function drawLine(content, posX, y) {
        //     content.moveTo(posX, y)
        //     content.lineTo(posX, y + 10)
        // }

        // 使用定时器让球动起来

        // 球的起始位置是画布中心
        // const radius = 10;
        let ballPos = { x: canvas.width / 2, y: canvas.height / 2 };
        let speedX = 2;
        let speedY = 1;
        // 小球与墙壁四周的碰撞检查
        function textHitWall() {
            // 碰到右边界
            if (ballPos.x > canvas.width - radius) {
                speedX = -speedX;
            }
            // 碰到左边界
            if (ballPos.x < radius) {
                speedX = -speedX;
            }
            // 碰到右边界
            if (ballPos.y > canvas.height - radius) {
                speedY = -speedY;
            }
            // 碰到左边界
            if (ballPos.y < radius) {
                speedY = -speedY;
            }
        }

        // setInterval(function () {
        //     // 清屏
        //     content.clearRect(0, 0, canvas.width, canvas.height);
        //     // 绘制球
        //     // ballPos.x += 2;
        //     // ballPos.y += 1;
        //     textHitWall();
        //     // 计算小球位置
        //     ballPos.x += speedX;
        //     ballPos.y += speedY;
        //     // content.fillStyle = "white";
        //     // content.beginPath();
        //     // content.arc(ballPos.x, ballPos.y, radius, 0, 2 * Math.PI);
        //     // content.fill();
        //     render();
        // }, 50);

        function run() {
            // 清屏
            content.clearRect(0,0,canvas.width,canvas.height);
            // 碰撞检测
            textHitWall();
            // 计算小球位置
            ballPos.x += speedX;
            ballPos.y += speedY;
            // 渲染
            render();
            requestAnimationFrame(run);
        }

        run();

        // 绘制碗
        // {
        //     const radius = 20;
        //     content.fillStyle = "white";
        //     content.beginPath();
        //     content.arc(canvas.width / 5, canvas.height / 5, radius, 0,  Math.PI);
        //     content.fill();
        // }

        // {
        //     const radius = 5;
        //     content.fillStyle = "white";
        //     content.beginPath();
        //     content.arc(canvas.width / 5, canvas.height / 2.8, radius, 0,  Math.PI, true);
        //     content.fill();
        // }


    </script> -->
</body>

</html>